<template>
	<div class="acqui-monaco-editor">
		<!-- <view class="nav_tab">
			<el-form :inline="true" ref="form">
				<el-form-item label="主题样式">
					<el-select v-model="theme" size="mini" @change="themeChange" placeholder="主题">
						<el-option v-for="item in themeOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="语言">
					<el-select v-model="language" size="mini" filterable @change="languageChange" placeholder="语言">
						<el-option v-for="item in languageOption" :key="item.id" :label="item.id" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="只读">
					<el-select v-model="isOnnyRead" size="mini" filterable @change="changeIsEdi" placeholder="只读">
						<el-option label="否" :value="false"></el-option>
						<el-option label="是" :value="true"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
		</view> -->
		<div class="container" :id="mountId"></div>
	</div>
</template>
<script>
// 引入编辑器
// import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
// 引入语法（引入之后相关语言的语法就会有了）
// import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution';
// 引入查找功控件
// import 'monaco-editor/esm/vs/editor/contrib/find/browser/findController.js';
// import { watch } from 'vue';
// 引入monaco
import * as monaco from 'monaco-editor';

// 引入语法提示
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
export default {
	props: {
		defautVal: {
			//uniapp中页面传参字数有限制，如果需要设置大量的就调用setDefaltVal方法
			type: String
		},
		isOnyRead: {
			type: Boolean,
			default: false
		},
		mountId: {
			type: String,
			default: 'container'
		}
	},
	data() {
		return {
			themeOption: [
				{
					value: 'vs',
					label: '默认'
				},
				{
					value: 'hc-black',
					label: '高亮'
				},
				{
					value: 'vs-dark',
					label: '深色'
				}
			],
			languageOption: [],
			theme: 'vs',
			language: 'plaintext',
			isOnnyRead: false //是否只读
		};
	},
	mounted() {
		this.isOnnyRead = this.isOnyRead;
		this.initEditor();
		this.languageOption = monaco.languages.getLanguages();
	},
	methods: {
		initEditor() {
			// 设置worker，如果不设置woker会报错
			self.MonacoEnvironment = {
				getWorker(_, label) {
					if (label === 'json') {
						return new jsonWorker();
					}
					if (label === 'css' || label === 'scss' || label === 'less') {
						return new cssWorker();
					}
					if (label === 'html' || label === 'handlebars' || label === 'razor') {
						return new htmlWorker();
					}
					if (label === 'typescript' || label === 'javascript') {
						return new tsWorker();
					}
					return new editorWorker();
				}
			};
			const domEditor = document.getElementById(this.mountId);
			// 创建编辑器
			this.monacoEditor = monaco.editor.create(domEditor, {
				theme: this.theme,
				automaticLayout: true,
				value: this.defautVal ? this.defautVal : `{\n\n}`,
				language: 'json'
			});
			// 添加右键功能
			this.monacoEditor.addAction({
				id: 'addItem', // 菜单项 id
				label: '添加项', // 菜单项名称
				keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.PageUp], // 绑定快捷键，是 monacoEditor 自定义的对应关系
				contextMenuGroupId: 'navigation', // 所属菜单的分组
				run: () => {
					this.$emit('addItem', this.monacoEditor.getModel().getValueInRange(this.monacoEditor.getSelection()));
				} // 点击后执行的操作
			});
		},
		themeChange(val) {
			monaco.editor.setTheme(val);
		},
		// 修改编辑语言
		languageChange(val) {
			console.log(val);
			monaco.editor.setModelLanguage(this.monacoEditor.getModel().original, val);
			monaco.editor.setModelLanguage(this.monacoEditor.getModel().modified, val);
		},
		// 修改是否能够编辑
		changeIsEdi(val) {
			this.monacoEditor.updateOptions({
				readOnly: val
			});
		},
		// 获取编辑器里输入的值
		getEdiValue() {
			return this.monacoEditor.getValue();
		},
		/**
		 * 设置默认值
		 * @param {string} val
		 * @param {string} languege   语言
		 */
		setDefaltVal(val, languege) {
			this.changeIsEdi(false);
			this.monacoEditor.trigger('anyString', 'editor.action.formatDocument');
			this.monacoEditor.setValue(val);
			const timer = setTimeout(() => {
				this.changeIsEdi(true);
				clearTimeout(timer);
			}, 2000);
			if (!languege) return;
			monaco.editor.setModelLanguage(this.monacoEditor.getModel(), languege);
		}
	},
	destroyed() {
		console.log('销毁');
		this.monacoEditor.dispose();
	}
};
</script>
<style lang="less" scoped>
/* #container {
	width: 100vw;
	height: calc(100vh - 41px);
	text-align: left;
}
.el-form-item {
	margin-bottom: 0;
	margin-left: 10px;
} */
.acqui-monaco-editor {
	width: 100%;
	height: 100%;
	// nav样式
	.nav_tab {
		background-color: #dddcdc;
		display: flex;
		align-items: center;
		padding: 30rpx;

		.el-form-item {
			margin-bottom: 0;
			margin-left: 10px;
		}
	}

	.container {
		width: 100%;
		height: 90%;
		// text-align: left;
		// 编辑器左侧样式
		// /deep/ .margin-view-overlays {
		// 	background-color: #272833;
		// }
		// // 右侧小地图样式
		// /deep/ .minimap {
		// 	border-left: 1px solid;
		// }
		// // 中间编辑器样式
		// /deep/ .monaco-editor-background{
		// 	background-color: #272833;
		// }
	}
}
</style>
